import React, { Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import { Spin } from 'antd';
import BasicLayout from '@/components/layout/BasicLayout';
import ProtectedRoute from '@/components/common/ProtectedRoute';

// 懒加载页面组件
const Login = React.lazy(() => import('@/pages/login'));
const Dashboard = React.lazy(() => import('@/pages/dashboard'));
const CardList = React.lazy(() => import('@/pages/cards/list'));
const CardCreate = React.lazy(() => import('@/pages/cards/create'));
const CardEdit = React.lazy(() => import('@/pages/cards/edit'));
const TopicList = React.lazy(() => import('@/pages/topics/list'));
const UserList = React.lazy(() => import('@/pages/users/list'));
const AppConfig = React.lazy(() => import('@/pages/config/app'));
const VersionConfig = React.lazy(() => import('@/pages/config/version'));

// 页面包装器，提供加载状态
const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <Suspense 
    fallback={
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        height: '200px' 
      }}>
        <Spin size="large" tip="页面加载中..." />
      </div>
    }
  >
    {children}
  </Suspense>
);

// 404页面
const NotFound: React.FC = () => (
  <div style={{ 
    display: 'flex', 
    flexDirection: 'column',
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '400px',
    textAlign: 'center'
  }}>
    <h1 style={{ fontSize: '72px', margin: 0, color: '#ccc' }}>404</h1>
    <p style={{ fontSize: '18px', color: '#666' }}>页面不存在</p>
  </div>
);

// 403页面
const Forbidden: React.FC = () => (
  <div style={{ 
    display: 'flex', 
    flexDirection: 'column',
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '400px',
    textAlign: 'center'
  }}>
    <h1 style={{ fontSize: '72px', margin: 0, color: '#ccc' }}>403</h1>
    <p style={{ fontSize: '18px', color: '#666' }}>没有权限访问此页面</p>
  </div>
);

export const router = createBrowserRouter([
  {
    path: '/login',
    element: (
      <PageWrapper>
        <Login />
      </PageWrapper>
    ),
  },
  {
    path: '/',
    element: (
      <ProtectedRoute>
        <BasicLayout />
      </ProtectedRoute>
    ),
    children: [
      {
        index: true,
        element: <Navigate to="/dashboard" replace />,
      },
      {
        path: 'dashboard',
        element: (
          <PageWrapper>
            <Dashboard />
          </PageWrapper>
        ),
      },
      {
        path: 'cards',
        children: [
          {
            index: true,
            element: (
              <PageWrapper>
                <CardList />
              </PageWrapper>
            ),
          },
          {
            path: 'create',
            element: (
              <PageWrapper>
                <CardCreate />
              </PageWrapper>
            ),
          },
          {
            path: 'edit/:id',
            element: (
              <PageWrapper>
                <CardEdit />
              </PageWrapper>
            ),
          },
        ],
      },
      {
        path: 'topics',
        element: (
          <PageWrapper>
            <TopicList />
          </PageWrapper>
        ),
      },
      {
        path: 'users',
        element: (
          <PageWrapper>
            <UserList />
          </PageWrapper>
        ),
      },
      {
        path: 'config',
        children: [
          {
            path: 'app',
            element: (
              <PageWrapper>
                <AppConfig />
              </PageWrapper>
            ),
          },
          {
            path: 'version',
            element: (
              <PageWrapper>
                <VersionConfig />
              </PageWrapper>
            ),
          },
        ],
      },
      {
        path: '403',
        element: <Forbidden />,
      },
      {
        path: '*',
        element: <NotFound />,
      },
    ],
  },
]);